<template>
	<view class="container">
		<userinfo v-if="user_options.toLogin" :options="user_options" @getUserscope="getUserInfo" @toLogin="getUserInfo"></userinfo>
		<villageChooseHouse v-if="choose_options.need_choose_house" @goVillagehouse="goVillagehouse" :options="choose_options" @chooseHouseId="chooseHouseId"></villageChooseHouse>
		<view class="swiper-container" v-if="listdata && pic.length > 0">
			<swiper autoplay="auto" indicator-dots="ture" indicator-color="rgba(255,255,255,0.5)" indicator-active-color="#06c1ae"
			 interval="5000" duration="500" current="0" class="swiper">
				<swiper-item v-for="(item, index) in pic" :key="index">
					<image :src="item" class="img" lazy-load="true"></image>
				</swiper-item>
			</swiper>
		</view>
		<view class="card-box">
			<view class="card-title">
				{{listdata.title}}
			</view>
			<view class="card-minibox">
				<view class="card-detail">
					<view class="mini-icon">
						<image src="../../../static/images/signuptime.png" class="icon-img"></image>
					</view>
					<view class="card-text">{{listdata.activity_start_time}}至{{listdata.activity_end_time}}</view>
				</view>
				<view class="card-detail">
					<view class="mini-icon mini-icons">
						<image src="../../../static/images/signupnum.png" class="icon-img"></image>
					</view>
					<view class="card-text">已报名{{now_activity_apply_sum}}人</view>
				</view>
				<view class="card-detail">
					<view class="mini-icon">
						<image src="../../../static/images/money.png" class="icon-img"></image>
					</view>
					<view class="card-text">{{listdata.apply_fee}}</view>
				</view>
			</view>
		</view>
		<view class="container-warp">
			<view class="warp">
				<view class="detail-top">
					<view class="detail">
						<view class="detail-icon">
							<image src="../../../static/images/iocn-left.png" class="detail-img"></image>
						</view>
						<view class="detail-title">活动详情</view>
						<view class="detail-icon">
							<image src="../../../static/images/icon-right.png" class="detail-img"></image>
						</view>
					</view>
				</view>
				<view class="detail-box">
					<view class="title">报名截止时间：<text style="color: #000000;">{{listdata.apply_end_time}}</text></view>
					<view class="content">活动介绍：
						<view style="color: #000000;"><rich-text :nodes="listdata.content" :loading="loading" /></rich-text></view>
					</view>
				</view>
			</view>
		</view>
		<view  :style="btn_style" class="btn" @click="btnpay1" v-if="listdata.status == 2">我要报名</view>
		<view  class="btn1" v-else :disabled="true">{{ listdata.statusDesc }}</view>
		<view>
			<uni-popup ref="popup" type="bottom" style="width: 100%;">
				<view class="active-box">
					<view class="active-title">活动报名</view>
					<view class="detail-close" @tap="closePopup">
						<image src="../../../static/images/guanbi.png" class="detail-img"></image>
					</view>
				</view>
				<view class="popup-box">
					<view class="popup-title">报名姓名</view>
					<input type="text" class="inp-box" v-model="name" value="" placeholder-style="font-size: 28rpx;font-weight: normal;font-stretch: normal;line-height: 60rpx;letter-spacing: 0rpx;color: #d3d3d3;margin-left:15rpx"
					 placeholder="请输入报名姓名" />
					<view class="popup-title">手机号码</view>
					<input type="number" class="inp-box" v-model="phone" value="" placeholder-style="font-size: 28rpx;font-weight: normal;font-stretch: normal;line-height: 60rpx;letter-spacing: 0rpx;color: #d3d3d3;margin-left:15rpx"
					 placeholder="请输入手机号码，必须为社区业主手机号码" />
					<view class="popup-title">报名人数</view>
					<input type="number" class="inp-box" v-model="peoplenum" value="" placeholder-style="font-size: 28rpx;font-weight: normal;font-stretch: normal;line-height: 60rpx;letter-spacing: 0rpx;color: #d3d3d3;margin-left:15rpx"
					 placeholder="请输入报名人数" />
					<view class="popup-title">备注(可选）</view>
					<input type="text" class="inp-box" v-model="text" value="" placeholder-style="font-size: 28rpx;font-weight: normal;font-stretch: normal;line-height: 60rpx;letter-spacing: 0rpx;color: #d3d3d3;margin-left:15rpx"
					 placeholder="请输入内容" />
				</view>
				<button type="primary" :style="btn_style" class="btns" @click="btnpays">我要报名</button>
			</uni-popup>
		</view>
	</view>
</template>

<script>
	import uniPopup from "../../../appComponent/uni/uni-popup/uni-popup.vue"
	var common = require('../../../utils/common.js');
	import villageChooseHouse from '../../../appComponent/villagePage/villageChooseHouse';
	var app = getApp();
	var _this;
	const getunpaidmentlist = () => {
		common.post('HouseApi&a=village_activity', {
			village_id: _this.village_id,
			pigcms_id: _this.pigcms_id,
			activity_id: _this.id
		}, data => {
			console.log('++++', data)
			_this.listdata = data;
			_this.pic = data.pic;
			_this.now_activity_apply_sum = data.now_activity_apply_sum
		});
	};
	const getactivityapply = () => {
		console.log('++++', _this.peoplenum)
		common.post('HouseApi&a=village_activity_apply', {
			village_id: _this.village_id,
			pigcms_id: _this.pigcms_id,
			activity_id: _this.id,
			phone: _this.phone,
			name: _this.name,
			apply_num: _this.peoplenum,
			memo: _this.text
		}, data => {
			console.log('++++', _this.peoplenum)
			_this.errormsg = data
			if(_this.errormsg == '添加成功'){
				_this.now_activity_apply_sum = parseInt(_this.now_activity_apply_sum) + parseInt(_this.peoplenum);
				console.log("222222222222",_this.now_activity_apply_sum)
				console.log("333333333333",_this.peoplenum)
				_this.peoplenum = '';
				_this.name = '';
				_this.phone = '';
				_this.text = '';
				uni.showModal({
					title: common.changeTxt('提示'),
					content: common.changeTxt(_this.errormsg),
					showCancel: false,
					confirmText: common.changeTxt('好的'),
					success: function(res) {
						
					}
				});
			}else{
				uni.showModal({
					title: common.changeTxt('提示'),
					content: common.changeTxt(_this.errormsg),
					showCancel: false,
					confirmText: common.changeTxt('好的'),
					success: function(res) {
					}
				});
			}
			
		});
	};
	export default {
		data() {
			return {
				listdata: {},
				village_id: 0,
				pigcms_id: 0,
				actcolor: '',
				btn_style: '',
				id: 0,
				pic: [],
				name: '',
				phone: '',
				peoplenum: '',
				text: '',
				errormsg:'',
				now_activity_apply_sum: 0,
				user_options:{},
				bind_options:{},
				choose_options:{},
				loading:false//开启loading不显示默认值
			}
		},
		onShow() {
			// #ifdef H5
			common.hideWxShare()
			// #endif
		},
		onLoad(options) {
			_this = this;
			_this.id = options.id
			// #ifdef H5
			console.log('准备跳小程序页', _this);
			common.webToMiniapp(_this.route, options, 'redirect')
			// #endif

			common.setMainColor(_this, function(config) {
				_this.actcolor = config.config.mobile_head_color
				_this.btn_style = 'background-color: ' + _this.actcolor + ';box-shadow:0px 30rpx 30rpx -30rpx ' + _this.actcolor +
					';';

				const res = uni.getStorageSync('village_key');
				if (res) {
					_this.village_id = res.village_id;
					_this.pigcms_id = res.pigcms_id;
					_this.village_name = res.village_name;
				};
				
				_this.btnpay()
			});
		},
		methods: {
			btnpay1(){
				_this.openPopup()
			},
			goVillagehouse(){
				getunpaidmentlist()
			},
			btnpay() {
				if (app.globalData.is_login) {
					_this.choose_options = {};
			
					console.log('village_id----------', _this.village_id);
					console.log('pigcms_id++++++++', _this.pigcms_id);
					if (!_this.pigcms_id) {
						_this.choose_options = {
							need_choose_house: true,
							village_id: _this.village_id,
							after_event: '',
							canCancle: false,
							bindHasCancleMethod: true
						}
						console.log('choose_options', _this.choose_options);
					} else {
						getunpaidmentlist()
					}
				} else {
					_this.user_options = {
						toLogin: true
					};
				}
			},
			btnpays() {
				getactivityapply()
				_this.closePopup()
			},
			openPopup() {
				this.$refs.popup.open()

			},
			closePopup() {
				this.$refs.popup.close();
			},
			chooseHouseId(e) {
				console.log(e);
				if(e.pigcms_id){
					_this.pigcms_id = e.pigcms_id;
				}
				_this.openPopup()
			},
		},
		components: {
			villageChooseHouse,
			uniPopup
		}
	}
</script>

<style>
	page {
		background: #FFFFFF;
	}
	.container {
		margin: 0;
		padding: 0;
	}
	.swiper-container {
		position: relative;
	}
	.swiper-container .swiper {
		height: 326rpx;
	}
	.swiper-container .swiper .img {
		width: 100%;
		height: 100%;
	}
	.card-box {
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		margin: 0 30rpx;
	}
	.card-title {
		font-size: 32rpx;
		font-weight: normal;
		font-stretch: normal;
		line-height: 80rpx;
		letter-spacing: 0rpx;
		color: #333333;
		background-color: #fafafa;
		/* box-shadow: 0rpx 2rpx 9rpx 2rpx rgba(207, 207, 207, 0.5); */
		border-radius: 20rpx 20rpx 0rpx 0rpx;
		margin-top: -30rpx;
		z-index: 99;
		padding-left: 15rpx;
	}

	.card-minibox {
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
	}

	.card-detail {
		display: flex;
		flex-direction: row;
		width: 100%;
		justify-content: flex-start;
		align-items: center;
		padding-left: 15rpx;
	}

	.mini-icon {
		width: 30rpx;
		height: 30rpx;
	}
	.mini-icons {
		/* width: 23rpx;
		height: 30rpx; */
	}
	.icon-img {
		width: 100%;
		height: 100%;
		display: block;
	}

	.card-text {
		font-size: 26rpx;
		font-weight: normal;
		font-stretch: normal;
		line-height: 70rpx;
		letter-spacing: 0rpx;
		color: #121d2d;
		margin-left: 15rpx;
	}

	.btn {
		position: fixed;
		height: 100rpx;
		line-height: 100rpx;
		text-align: center;
		color: #FFFFFF;
		bottom: 0;
		bottom: calc(0rpx + constant(safe-area-inset-bottom));
		bottom: calc(0rpx + env(safe-area-inset-bottom));
		width: 100%;
		background-color: #2681f3;
		border-radius: 0;
	}

	.container-warp {
		background: rgb(244, 244, 244);
		width: 100%;
		padding-top: 20rpx;
	}

	.warp {
		background: #FFFFFF;
		width: 100%;
	}

	.detail {
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		width: 100%;
	}

	.detail-icon {
		width: 20rpx;
		height: 20rpx;
	}

	.detail-img {
		width: 100%;
		height: 100%;
		display: block;
	}

	.detail-title {
		font-size: 32rpx;
		font-weight: 700;
		font-stretch: normal;
		line-height: 80rpx;
		letter-spacing: 0rpx;
		color: #000000;
		margin: 0 20rpx;
	}

	.detail-box {
		padding: 30rpx;
	}

	.title {
		font-size: 26rpx;
		font-weight: normal;
		font-stretch: normal;
		line-height: 70rpx;
		letter-spacing: 0px;
		color: rgb(38, 129, 243);
	}
	.content {
		font-size: 26rpx;
		font-weight: normal;
		font-stretch: normal;
		line-height: 50rpx;
		letter-spacing: 0px;
		color: rgb(38, 129, 243);
	}
	.active-box {
		display: flex;
		flex-direction: row;
		justify-content: flex-end;
		align-items: center;
	}

	.active-title {
		font-size: 34rpx;
		font-weight: normal;
		font-stretch: normal;
		line-height: 48rpx;
		letter-spacing: 0px;
		text-align: center;
		color: #000000;
		width: 100%;
		transform: translateX(20rpx);
	}
	
	.detail-close{
		position:absolute;
		right:0;
		top:0;
		width:100rpx;
		height:100rpx;
	}
	.detail-close .detail-img{
		width:44rpx;
		height:44rpx;
		padding:28rpx;
	}

	.popup-box {
		margin-top: 30rpx;
		margin-bottom: 90rpx;
		margin-bottom: calc(90rpx + constant(safe-area-inset-bottom));
		margin-bottom: calc(90rpx + env(safe-area-inset-bottom));
	}

	.popup-title {
		font-size: 26rpx;
		font-weight: normal;
		font-stretch: normal;
		line-height: 60rpx;
		letter-spacing: 0rpx;
		color: #8591a2;
	}

	.inp-box {
		background-color: #ffffff;
		box-shadow: 0px 1px 11px 2px rgba(227, 227, 227, 0.33);
		border-radius: 10px;
		height: 88rpx;
		border: solid 2px #eaeef2;
		padding-left: 20rpx;
	}

	.btns {
		width: 100%;
		position: fixed;
		left: 0;
		bottom: 0;
		bottom: calc(0rpx + constant(safe-area-inset-bottom));
		bottom: calc(0rpx + env(safe-area-inset-bottom));
		border-radius: 0;
		z-index: 9999999;
	}
	.btn1 {
		position: fixed;
		height: 100rpx;
		line-height: 100rpx;
		text-align: center;
		color: #FFFFFF;
		bottom: 0;
		bottom: calc(0rpx + constant(safe-area-inset-bottom));
		bottom: calc(0rpx + env(safe-area-inset-bottom));
		width: 100%;
		background-color: #CCCCCC;
		border-radius: 0;
	}
</style>
